<template>
    <div></div>
</template>

<script setup>
import { ref } from 'vue';
const refMsg = ref('this is a ref messgage')

const logRefMsg = () => {
    console.log('logRefMsg:', refMsg.value)
}

// 如果其他组件需要通过ref使用到本组件的 变量/常量/方法
// 则需要将其通过defineExpose暴露出来才能引用
defineExpose({
    refMsg,
    logRefMsg
})

</script>

<style scoped>
.componentChild {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    width: 300px;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    background-color: #f8f9fa;
    color: rgb(0, 191, 255);
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    position: relative;
    overflow: hidden;
}
</style>